<template>
	<div class="platform_log_wrapper">
		<div class="sw_query_form">
			<el-form size="small" :inline="true">
				<el-form-item>
					<el-input placeholder="请输入姓名" v-model="queryData.createName" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入账号" v-model="queryData.createAccount" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入描述" v-model="queryData.description" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.smallModule" clearable placeholder="请选择" style="width: 150px">
						<el-option v-for="(item, index) in enumData" :key="index" :label="item.msg" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="dateTimeRange"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						style="width: 340px"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryLogData">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container" v-loading="loading">
			<el-table size="medium" :data="logListData" height="100%" stripe v-loading="loading">
				<el-table-column prop="createAccount" label="姓名和账号" min-width="180">
					<template slot-scope="{ row }">{{ row.createName }} ({{ row.createAccount }})</template>
				</el-table-column>
				<el-table-column prop="description" label="描述" min-width="180"></el-table-column>
				<el-table-column prop="smallModule" label="业务模块" min-width="136">
					<template slot-scope="{ row }">
						<el-tag v-if="enumData.length > 0">
							{{ showLogType(row) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="actionUrl" label="http方法" min-width="160"></el-table-column>
				<el-table-column prop="level" label="日志等级" min-width="80">
					<template slot-scope="scope">
						<el-tag :type="scope.row.level | logLevelColorFilter">
							{{ scope.row.level | logLevelFilter }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="ipAddr" label="IP地址" min-width="100"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
			</el-table>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryLogData"></sw-pagination>
	</div>
</template>

<script>
import { getLogEnumList, getLogPageList } from '@/api/platform/tbSysLog';
export default {
	data() {
		return {
			loading: false,
			enumData: [],
			dateTimeRange: [],
			queryData: { page: 1, limit: 15 },
			dataCount: 0,
			logListData: []
		};
	},
	filters: {
		logLevelFilter(data) {
			switch (data) {
				case '1':
					return '提示';
				case '2':
					return '错误';
				case '3':
					return '警告';
				default:
					return '其他';
			}
		},
		logLevelColorFilter(data) {
			switch (data) {
				case '1':
					return 'success';
				case '2':
					return 'danger';
				case '3':
					return 'warning';
				default:
					return 'info';
			}
		}
	},
	mounted() {
		this.getLogEnumData();
		this.queryLogData();
	},
	methods: {
		async getLogEnumData() {
			let result = await getLogEnumList().then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data ? {} : result.data[0];
				this.enumData = datas.smallModule;
			}
		},

		//格式化日志请求参数
		formatLogParams() {
			let params = { ...this.queryData };
			if (this.dateTimeRange.length > 0) {
				params['startTime'] = new Date(this.dateTimeRange[0]).getTime();
				params['endTime'] = new Date(this.dateTimeRange[1]).getTime();
			}
			return params;
		},

		//获取日志数据
		async getLogListData() {
			let params = this.formatLogParams();
			let result = await getLogPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.logListData = !result.data ? [] : result.data;
			}
		},

		//查询日志数据
		queryLogData() {
			this.loading = true;
			this.getLogListData();
		},

		//显示日志类型
		showLogType(data) {
			let info = this.enumData.find((item) => item.value === data.smallModule);
			return info.msg;
		}
	}
};
</script>

<style lang="scss" scoped>
.platform_log_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	overflow: hidden;
	box-sizing: border-box;
}
</style>
